<template>
	<div>
		<el-container>
			<el-header :height="globalprop.top+'px'">
				<Header @headercollapse="collapse($event)" :global="globalprop" />
			</el-header>
			<el-container>
				<el-aside :width="globalprop.left+'px'" :style="{height: center+'px'}">
					<LeftNav :global="globalprop" />
				</el-aside>
				<el-container>
					<el-main style="padding: 20px;">
						<router-view></router-view>
					</el-main>
					<el-footer :height="footer+'px'" style="text-align: center;font-size: 12px;line-height: 60px;">
						©2019 langshao 使用狼少系统前必读 意见反馈 京ICP证030173号 京公网安备11000002000001号
					</el-footer>
				</el-container>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Header from "./Header"
	import LeftNav from "./LeftNav"
	export default {
		components: {
			Header,
			LeftNav
		},
		data() {
			return {
				globalprop: {
					top: 60,
					left: 250,
					isCollapse: false,
					bgColor: "#409EFF"
				},
				center: 0,
				footer: 60
			}
		},
		mounted() {
			this.center = document.documentElement.clientHeight - this.globalprop.top;
			var that = this;
			window.onresize = function() {
				that.center = document.documentElement.clientHeight - that.globalprop.top;
			}
		},

		methods: {
			//是否收起左侧菜单，被Header调用
			collapse: function(data) {
				console.log(data)
				this.globalprop.isCollapse = data.collapse;
				this.globalprop.left = data.left
			}
		}
	}
</script>

<style>
	.el-header {
		background: #409EFF;
		padding: 0px;
		color: #fff;
	}

	.el-aside {
		border-right: 1px solid #E4E7ED;
	}

	.el-main {
		padding: 0;
	}

	.el-container {
		padding: 0;
		margin: 0;
	}
</style>
